<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link type="Image/x-icon" href="pictures/icons/fav-ico.ico" rel="icon" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Lilita+One&family=PT+Sans+Narrow:wght@400;700&family=Raleway:wght@100&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/style.css" />
    <title>Borodinski-about-us</title>
  </head>
  <body>
    <div class="wrapper">
      <header class="header header-shop">
        <div class="header__groups">
          <nav class="header__navigation">
            <a href="index.html" class="header__btn btn-main"
              ><img src="pictures/icons/logo-short-dark.svg" alt=""
            /></a>
            <a href="#" class="header__btn btn-us">О нас</a>
            <a href="shop.html" class="header__btn btn-catalog"> Каталог</a>
            <a href="questions.html" class="header__btn btn-questions"> Частые вопросы</a>
          </nav>
          <div class="header__group-2">
            <a href="#" class="header__btn btn-find">
              <img src="pictures/icons/search.svg" alt="ПОИСК" />
            </a>
            <div class="header__basket basket">
              <a href="#popover" class="header__btn btn-basket popover-link">
                <img
                  class="btn-basket__icon"
                  src="pictures/icons/cart.svg"
                  alt="КОРЗИНА"
                />
                <p class="basket__goods-number">0</p>
              </a>
              <div id="popover" class="basket__popover basket-popover popover">
                <div class="popover__content">
                  <div class="close-popover">
                    <a type="button" class="close-popover__btn">
                      <img src="pictures/icons/cart-black.svg" alt="" />
                      <p class="basket__goods-number">0</p>
                    </a>
                  </div>
                  <h2 class="basket-popover__title">Корзина</h2>
                  <div class="basket-popover__list">
                    <div class="basket-popover__good-wrapper">
                      <div class="basket-popover__good-info">
                        <h3>Стрижка машинкой</h3>
                        <p>800 ₽</p>
                      </div>
                      <div class="basket-popover__delete-btn">
                        <button type="button">
                          <img src="pictures/icons/trash.svg" alt="" />
                        </button>
                      </div>
                    </div>
                    <div class="basket-popover__good-wrapper">
                      <div class="basket-popover__good-info">
                        <h3>Стрижка усов</h3>
                        <p>1200 ₽</p>
                      </div>
                      <div class="basket-popover__delete-btn">
                        <button type="button">
                          <img src="pictures/icons/trash.svg" alt="" />
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <a
              href="#popup"
              type="button"
              class="header__btn btn-enter popup-link"
              >Вход</a
            >
          </div>
        </div>
      </header>
      <main class="main--about-us">
        <div class="main-wrapper--about-us">
          <h2 class="main--about-us__title">
            Наша правдивая история<img class="title-sub-logo"
              src="pictures/icons/sub-logo.svg"
              width="36px"
              height="36px"
            />
          </h2>
          <p class="main--about-us__story-text">
            <span class="span-bullet"
              ><img src="pictures/icons/bullet.svg" alt="" height="16px" width="16px"/></span
            ><span class="text-first-letter">К</span>огда-то в причудливом уголке шумного города располагалась
            парикмахерская Borodinski, рай красоты и преображения. Фасад здания
            отличался винтажным шармом, а обветренная вывеска мягко покачивалась
            на ветру. Аромат сандалового дерева и лаванды наполнял воздух,
            привлекая прохожих обещаниями волшебных впечатлений.<br /><br /><span
              class="span-bullet"
              ><img src="pictures/icons/bullet.svg" alt="" /></span
            ><span class="text-first-letter">В</span>нутри, парикмахерская была очаровательным убежищем от внешнего
            мира. Стены были украшены старинными фотографиями и старинными
            зеркалами, которые, казалось, шептали секреты вечной элегантности.
            Звуки джазовой музыки танцевали в воздухе, создавая атмосферу
            расслабленности и изысканности. <br /><br /><span
              class="span-bullet"
              ><img src="pictures/icons/bullet.svg" alt="" /></span
            ><span class="text-first-letter">В</span> основе парикмахерской Бородинских стоял ее владелец, Господин
            Александр Бородинский, мастер своего дела. Со своими серебристыми
            волосами и теплой улыбкой он приветствовал каждого клиента, как
            старого друга. Его умелые руки танцевали на зачарованных машинках
            для стрижки, создавая произведения искусства, выходящие за рамки
            простой стрижки. <br /><br /><span class="span-bullet"
              ><img src="pictures/icons/bullet.svg" alt="" /></span
            ><span class="text-first-letter">О</span>дним солнечным утром молодая женщина по имени Елена робко вошла в
            парикмахерскую. Ее тонкие черты лица были скрыты завесой длинных
            непослушных локонов. Она всегда чувствовала себя невидимой, ей не
            хватало уверенности, чтобы выразить свою истинную сущность.
            <br /><br /><span class="span-bullet"
              ><img src="pictures/icons/bullet.svg" alt="" /></span
            ><span class="text-first-letter">Г</span>осподин Бородинский почувствовал ее опасения и поприветствовал ее
            мягким кивком. Он подвел ее к креслу, его глаза были полны
            понимания. Когда зачарованные машинки для стрижки загудели,
            трансформация начала разворачиваться. С каждым ударом неуверенность
            Елены таяла, уступая место вновь обретенному чувству силы.
            <br /><br /><span class="span-bullet"
              ><img src="pictures/icons/bullet.svg" alt="" /></span
            ><span class="text-first-letter">К</span>огда последняя прядь волос упала на землю, в отражении Елены в
            зеркале появилась сияющая улыбка. Ее некогда скрытая красота теперь
            ярко сияла, как будто терпеливо ждала этого момента, чтобы
            высвободиться. В парикмахерской Borodinski ей не просто сделали
            новую прическу; это дало ей смелость принять свое истинное «я».
            <br /><br /><span class="span-bullet"
              ><img src="pictures/icons/bullet.svg" alt="" /></span
            ><span class="text-first-letter">С</span>лух о преображении Елены быстро распространился по городу, и
            парикмахерская Бородинских стала прибежищем для тех, кто ищет
            собственные волшебные преображения. К креслу г-на Borodinski
            стекались люди всех слоев общества. у каждого своя уникальная
            история, которую хочется рассказать. <br /><br /><span
              class="span-bullet"
              ><img src="pictures/icons/bullet.svg" alt="" /></span
            ><span class="text-first-letter">П</span>арикмахерская стала центром творчества и вдохновения, где мечты
            воплощались в жизнь, а стены оглашались смехом и душевными
            разговорами. Зачарованные машинки для стрижки продолжали творить
            чудеса, меняя жизни по одной стрижке за раз. <br /><br /><span
              class="span-bullet"
              ><img src="pictures/icons/bullet.svg" alt="" /></span
            ><span class="text-first-letter">П</span>рошли годы, но наследие парикмахерской Бородинских продолжало
            жить. Умелые руки г-на Borodinski, возможно, состарились, но его
            страсть к своему ремеслу осталась непоколебимой. Парикмахерская
            стала символом надежды и самопознания, местом, где люди могли
            обрести свой голос и принять свою истинную красоту.
            <br /><br /><span class="span-bullet"
              ><img src="pictures/icons/bullet.svg" alt="" /></span
            ><span class="text-first-letter">И</span> так, Барбершоп Borodinski стал свидетельством силы трансформации,
            напомнив всем нам, что красота – это не только внешность, но и
            уверенность и сила, которые заключены внутри каждого из нас. Пока
            были мечты, которые можно было вплести в реальность, и жизни, к
            которым можно было прикоснуться, Барбершоп Borodinski продолжит
            оставаться маяком красоты и вдохновения во всем мире.
          </p>
          <div class="main--about-us__logo">
            <img src="pictures/icons/logo-full-white.svg" />
          </div>
        </div>
      </main>
      <!-- Футер -->
      <footer class="footer">
        <div class="footer__wrapper">
          <div class="footer__info footer-left">
            <img
              src="pictures/icons/logo-short-dark.svg"
              alt="BORODINSKI"
              class="footer-left__short-logo"
            />
            <p class="footer-left__paragraph">
              Санкт-Петербург, набережная<br />
              реки Карповки, 5, литера П.
            </p>
            <h3 class="footer-left__phone">+7 800 555-86-28</h3>
            <a href="" class="footer-left__link">Как нас найти?</a>
          </div>
          <div class="footer__offers footer-middle">
            <h3 class="footer-middle__title footer-title">
              Получайте лучшие предложения
            </h3>
            <div class="footer__form">
              <input
                class="footer-middle__email-form"
                type="text"
                placeholder="Введите ваш email"
              />
              <button class="submit-email-btn">
                <img src="pictures/icons/arrow-tail-right.svg" alt="" />
              </button>
            </div>
          </div>
          <div class="footer__social-media footer-right">
            <h3 class="footer-right__title footer-title">Давайте дружить</h3>
            <button class="footer-right__btn btn-sotial-media" type="button">
              <p>Профиль gitHub</p>
              <img src="pictures/icons/gitHub.png" alt="" width="auto%" />
            </button>
            <p class="footer-right__signature">
              Created by: <span class="creator">Hollow_DS</span>
            </p>
          </div>
        </div>
      </footer>
      <!-- Popup -->
      <div id="popup" class="popup">
        <div class="popup__body">
          <div class="popup__content">
            <a href="#" class="popup__close close-popup"
              ><img src="pictures/icons/cross.svg" alt=""
            /></a>
            <div class="popup__title">Личный кабинет</div>
            <div class="popup__box-1">
              <input class="popup__form-1" type="text" />
              <input class="popup__form-2" type="text" />
            </div>
            <div class="popup__box-2">
              <div class="popup__checkbox-container checkbox">
                <label class="check option">
                  <input class="check__input" type="checkbox" checked /><span
                    class="check__box"
                  ></span
                  >Запомнить меня
                </label>
              </div>
              <a class="foggot-password" href="">Забыл пароль</a>
            </div>
            <button class="popup-btn-enter" type="submit">Войти</button>
            <button class="popup-btn-registration" type="submit">
              Регистрация
            </button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>
